import React, {Component} from 'react';
import {Text, TextInput, TouchableOpacity, View, Alert, StyleSheet, AsyncStorage, FlatList, Image} from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import FetchUtils from './../../utils/FetchUtils';
import utils from './../../utils/utils';

export default class MyUserList extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: "查看所有",
        headerStyle: {
            backgroundColor: '#F6F6F6',
        },
        headerTitleStyle: {
            alignSelf: 'center',
            fontSize: utils.setSpText(17),
        },
        headerRight: <TouchableOpacity/>
    });

    constructor(props) {
        super(props);
        this.searchValue = '';
        this.state = {
            datas: null,
            size: 20,
            page: 0,
            loadingStatus: true,
            lastStatus: true,
        }
    }

    componentDidMount() {
        let param = {
            page: this.state.page,
            size: this.state.size,
        };
        AsyncStorage.getItem("XToken").then((xToken) => {
            FetchUtils.getWithHeader(utils.apiUrl + '/user/getMyAllList', xToken, param, (res) => {
                if(res.code === 200){
                    this.setState({
                        datas: res.apiData.content,
                        size: res.apiData.size,
                        page: res.apiData.number,
                        loadingStatus: false,
                        lastStatus: res.apiData.last,
                    })
                }else {
                    this.setState({
                        loadingStatus: false,
                    });
                    Alert.alert("警告", res.apiData)
                }


            });
        });
    }
    /*生成列表*/
    _makeItem(itemData) {
        let role = '';
        if(itemData.role == 1){
            role = '搭配师';
        }else if(itemData.role == 2){
            role = '体验官';
        }
        return (
            <TouchableOpacity key={itemData.id} onPress={this._toProfileView.bind(this, itemData.id, role)}>
                <View style={styles.EvaluateItem}>
                    <Image style={styles.imgItem}
                           source={{uri: utils.qiniuUrl + itemData.headerImg + utils.qiniu200Url}}/>
                    <View style={styles.EvaluateItemText}>
                        <Text style={styles.nameText}>{itemData.username}</Text>
                        <Text style={styles.markText} numberOfLines={1}>{itemData.keyword.replace(", ", " | ")} | {itemData.styleValue.replace(", ", " | ")}</Text>
                        <Text style={styles.markText}>{itemData.priceValue}</Text>
                    </View>
                </View>
                <View style={styles.lineBottom}/>
            </TouchableOpacity>
        )
    }

    /*生成列表key*/
    _keyExtractor = (item, index) => item.id;
    /*前往详情页*/
    _toProfileView = (id, role) => {
        let {navigate} = this.props.navigation;
        navigate('StyleManProfileNav', {userId: id, role: role})
    };
    /*下拉刷新*/
    _toRefresh = () => {
        AsyncStorage.getItem("XToken").then((xToken) => {
            if (!this.state.lastStatus) {
                this.setState({loadingStatus: true});
                let params = {
                    page: this.state.page + 1,
                    size: this.state.size,};
                FetchUtils.getWithHeader(utils.apiUrl + '/user/getMyAllList', xToken, params, (res) => {
                    if (res.code == 200) {
                        let oldEvalContent = this.state.datas;
                        let evalContent = res.apiData.content;
                        let newEval = oldEvalContent.concat(evalContent);
                        this.setState({
                            datas: newEval,
                            lastStatus: res.apiData.last,
                            page: res.apiData.number,
                            size: res.apiData.size,
                            loadingStatus: false,
                        })

                    } else {
                        Alert.alert("警告", res.apiData);
                        this.setState({
                            loadingStatus: false,
                        })
                    }
                })
            }
        });
    };
    render() {
        return (
            <View style={{flex: 1}}>
                <Spinner visible={this.state.loadingStatus} textContent={""} textStyle={{color: '#FFF'}}/>
                <FlatList
                    data={this.state.datas != null ? this.state.datas : null}
                    renderItem={({item}) => this._makeItem(item)}
                    keyExtractor={this._keyExtractor}
                />
                {
                    !this.state.lastStatus ?
                        <TouchableOpacity style={styles.butStyle} onPress={this._toRefresh.bind(this)}>
                            <Text>查看更多</Text>
                        </TouchableOpacity>
                        :
                        null
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    searchInputStyle: {
        height: utils.autoheight(40),
        backgroundColor: '#DEDEDE',
        borderRadius: 5,
        width: utils.autoWidth(250),
        fontSize: utils.setSpText(17),
        lineHeight: utils.autoheight(28),
        paddingTop: 0,
        paddingBottom: 0,
        fontFamily: '.SFNSText',
        textAlign: 'center',
        alignSelf: 'center',
    },
    EvaluateItem: {
        height: utils.autoheight(75),
        width: utils.screenWidth,
        flexDirection: 'row',
        paddingTop: utils.autoheight(10),
        paddingLeft: utils.autoWidth(10),
        paddingRight: utils.autoWidth(10),
    },
    imgItem: {
        height: utils.autoWidth(55),
        width: utils.autoWidth(55),
        borderRadius: utils.autoWidth(27.5),
        marginRight: utils.autoWidth(10),
        marginBottom: utils.autoWidth(10),
    },
    EvaluateItemText: {
        flex: 1,
    },
    lineBottom: {
        height: utils.autoheight(0.5),
        width: utils.autoWidth(300),
        backgroundColor: '#D5D5D5',
        alignSelf: 'center',
    },
    butStyle: {
        height: utils.autoheight(50),
        alignItems: 'center',
        justifyContent: 'center'
    }
});